// vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
const FileManagerPlugin = require('filemanager-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin



const path = require('path')

module.exports = {
  publicPath: process.env.VUE_APP_BASE_PUBLIC_PATH,// 使用cdn优化加载,针对不同平台是否有cdn、cnd地址不同、是否使用cnd
  productionSourceMap: false,
  css: {
    //使用css分离插件
    extract: true,
    //开启csssourcemaps
    sourceMap: false,
    //css预设器配置项
    loaderOptions: {},
    //启用css modules for all css
    modules: false
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/css/global.less')]
    }
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/assets/icon/svgs'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/assets/icon/svgs'))
      .end()
      .use('file-loader')
      .loader('file-loader')

    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 压缩代码
    config.optimization.minimize(true)
    // 分割代码
    config.optimization.splitChunks({
      chunks: 'all',
      minSize: 200000,
      maxSize: 500000,
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          priority: 100
        }
      }
    })
  },
  configureWebpack: (config) => {
    config.entry.app = ['babel-polyfill', './src/main.js']
    config.externals = {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    // 生产打包配置
    let prd_plugins = [
      //删除console插件
      new TerserPlugin({
        parallel: true,
        sourceMap: false,
        terserOptions: {
          warnings: false,
          compress: {
            // 打包时删除console以及debugger，测试环境如需使用console或者debugger请改为false（不要直接删除）
            drop_console: false,
            drop_debugger: true,
          },
          output: {
            //去掉注释内容
            comments: false,
          },
        }
      }),
      new FileManagerPlugin({
        onEnd: {
          archive: [{
            source: './dist',
            destination: `./dist/gh-h5-vue-template-${process.VUE_CLI_SERVICE.mode}.tar.gz`,
            format: 'tar',
            options: {
              gzip: true,
              gzipOptions: {
                level: 1
              },
              globOptions: {
                nomount: true
              }
            }
          }]
        }
      }),
      new BundleAnalyzerPlugin(//打包检测
        {
          analyzerMode: 'disabled',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
        }
      ),
    ]
    //只有打包生产环境才需要将console删除
    if (process.env.NODE_ENV == 'production') {
      config.plugins = [...config.plugins, ...prd_plugins]
    }
  }
  // ,
  // chainWebpack: config => {
  //   config
  //     .entry('app')
  //     .add('babel-polyfill')
  // }
  // config.output.filename('[name].[hash].js').end()
  // }
}
